<template>
  <div>
    <el-form label-width="5rem">
      <el-form-item label="操作">
        <el-button plain icon="el-icon-plus" type="text" @click="handleAdd">添加党组织</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="TableData" class="tab" border>
      <el-table-column label="序号" type="index" fixed="left" width="100">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="alias" />
      <el-table-column label="党团组织类型" prop="groupType">
        <template slot-scope="{row}">{{ row.groupType-1?'团组织':'党组织' }}</template>
      </el-table-column>
      <el-table-column label="组织层级" prop="level">
        <template slot-scope="{row}">
          <el-tag :color="partyGroupTypeDict&&partyGroupTypeDict[row.level].color">
            <a style="color: white">{{ partyGroupTypeDict&&partyGroupTypeDict[row.level].alias }}</a>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上级组织" width="240">
        <template slot-scope="{row}">
          <PartyGroupTag :id.sync="row.parentGroup" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="{row}">
          <span>{{ formatTime(row.create) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-if="dialogCompanyGroup" :title="FormTitle" :visible.sync="dialogCompanyGroup">
      <el-form ref="refForm" :model="companyGroupForm" label-width="80px">
        <el-form-item label="名称" prop="alias">
          <el-input v-model="companyGroupForm.alias" placeholder="例如：第一党小组" />
        </el-form-item>
        <el-form-item label="类型" prop="groupType">
          <el-select v-model="companyGroupForm.groupType">
            <el-option
              v-for="(item,index) in typeArray"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="层级" prop="level">
          <PartyGroupTypeSelector v-model="companyGroupForm.level" :alias-map-func="aliasMapFunc" />
        </el-form-item>
        <el-form-item label="上级组织">
          <PartyGroupSelector v-model="companyGroupForm.parentGroup" :code.sync="companySelected" />
          <span style="color: #555">如没有上级党组织，请勿选择</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('refForm')">立即提交</el-button>
          <el-button @click="resetForm('companyGroupForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getCompanyGroup, postCompanyGroup } from '@/api/zzxt'
import { formatTime } from '@/utils'
export default {
  name: 'CompanyManage',
  components: {
    PartyGroupTypeSelector: () =>
      import('@/components/Party/PartyGroup/PartyGroupType/PartyGroupTypeSelector'),
    PartyGroupSelector: () =>
      import('@/components/Party/PartyGroup/PartyGroupSelector'),
    PartyGroupTag: () => import('@/components/Party/PartyGroup/index')
  },
  data: () => ({
    loading: false,
    TableData: [],
    companySelected: null,
    dialogCompanyGroup: false,
    FormTitle: '',
    companyGroupForm: {},
    typeChange: false,
    typeArray: [
      { name: '党组织', value: 1, aliasMapFunc: i => i.replace(/团/g, '党') },
      { name: '团组织', value: 2, aliasMapFunc: i => i.replace(/党/g, '团') }
    ]
  }),
  computed: {
    currentCompany() {
      const temp = this.$store.state.user.globalCompany
      if (temp) this.companyGroupForm.parentGroup
      return temp
    },
    aliasMapFunc() {
      const { groupType } = this.companyGroupForm
      const arr = this.typeArray
      const item = arr.find(i => groupType === i.value)
      return item && item.aliasMapFunc
    },
    partyGroupTypeDict() {
      return this.$store.state.party.partyGroupTypeDict
    }
  },
  watch: {
    currentCompany: {
      handler(val) {
        if (val) this.RefreshTableData()
      }
    }
  },
  mounted() {
    this.$store.dispatch('party/initDictionary')
    this.RefreshTableData()
  },
  methods: {
    formatTime,
    RefreshTableData() {
      this.loading = true
      getCompanyGroup({ companyCode: this.currentCompany })
        .then(data => {
          this.TableData = data.list
        })
        .finally(() => {
          this.loading = false
        })
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.companyGroupForm.company = this.currentCompany
          postCompanyGroup(this.companyGroupForm).then(data => {
            this.$message.success('提交成功')
            this.dialogCompanyGroup = false
            this.RefreshTableData()
          })
        }
      })
    },
    handleAdd() {
      this.isEdit = false
      this.FormTitle = '添加党组织'
      this.companyGroupForm = {}
      this.dialogCompanyGroup = true
    },
    handleEdit(row) {
      this.FormTitle = '编辑党组织信息'
      this.companyGroupForm = row
      this.dialogCompanyGroup = true
    },
    handleDelete(row) {
      this.$confirm('确认删除？').then(_ => {
        postCompanyGroup({
          id: row.id,
          isRemoved: true
        }).then(data => {
          this.$message.success('成功删除')
          this.RefreshTableData()
        })
      })
    }
  }
}
</script>
